<template>
  <div>
    <el-dialog
      title="选择人员"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="80%"
      append-to-body
    >
      <div class="person_content">
        <div class="group">
          <div class="mailList">
            <h3>通讯录</h3>
            <div class="group_con">
              <div class="title">
                <span
                  v-for="(item, index) in headList"
                  :key="index"
                  @click="searchBeforLive(item.superId, index)"
                >
                  {{ item.name }}
                  <span>></span>
                </span>
              </div>
              <div class="searchInput">
                <el-input
                  v-model="staffNameOrId"
                  placeholder="请输入姓名或者工号"
                  size="mini"
                  style="width: 60%"
                ></el-input>
                <el-button type="primary" size="mini" @click="searchStaff()"
                  >搜索</el-button
                >
                <el-button type="primary" size="mini" @click="RefreshList()"
                  >所有分组</el-button
                >
              </div>
              <div v-loading="loading" class="staff_con">
                <ul>
                  <li
                    v-for="(item1, index) in staffList"
                    :key="'info' + index"
                    class="personList"
                  >
                    <p style="padding-left: 10px" @click="
                        watchGroup(item1.orgId, item1.orgName, item1.relaOrgId)
                      ">
                      <i class="el-icon-arrow-down"></i>
                      {{ item1.orgName }}
                    </p>
                    <p style="padding-right: 20px">
                      <el-button
                        @click="handleChangeGroup(item1.orgId, item1.orgName)"
                        size="mini"
                        type="primary"
                        disabled
                        >选择</el-button
                      >
                      <el-button
                        @click="
                          watchGroup(
                            item1.orgId,
                            item1.orgName,
                            item1.relaOrgId
                          )
                        "
                        size="mini"
                        type="success"
                        >下一层</el-button
                      >
                    </p>
                  </li>
                  <!-- 人list -->
                  <ul class="person_list">
                    <li
                      v-for="(item2, index) in personList"
                      :key="'info2-' + index"
                      @click="
                        handleCheckedCitiesChange(
                          item2.staffId,
                          item2.staffName,
                          item2.orgName,
                          item2.staffAccount,
                          item2.staffPosition,
                          item2.orgFullName
                        )
                      "
                    >
                      <el-tooltip class="item" placement="bottom">
                        <div slot="content">
                          部门：{{ item2.orgName }}<br /><br />单位：{{
                            toplicText(item2)
                          }}<br /><br />工号：{{ item2.staffAccount
                          }}<br /><br />
                          职位：{{
                            item2.staffPosition ? item2.staffPosition : ""
                          }}
                        </div>
                        <div>
                          <span class="list_con">{{ item2.staffName }}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px; color: #999">{{
                            toplicText(item2)
                          }}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px; color: #999">{{
                            item2.orgName
                          }}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px; color: #999">{{
                            item2.staffAccount
                          }}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px; color: #999">{{
                            item2.staffPosition ? item2.staffPosition : ""
                          }}</span>
                        </div>
                      </el-tooltip>
                    </li>
                  </ul>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="personnel">
          <h3>已选人员或群组</h3>
          <div class="person_box">
            <div
              v-for="(tag, index) in upperStory"
              :key="tag.staffId"
              closable
              @close="handleClose(index)"
            >
              <!-- <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                部门：{{ tag.orgName }}<br /><br />
                单位：{{ toplicText(tag) }}<br /><br />
                工号：{{ tag.staffAccount }}<br /><br />
                职位：{{ tag.staffPosition ? tag.staffPosition : "" }}
              </div> -->
              <!-- <el-button>推送人员：{{ tag.staffName }}</el-button> -->
              <!-- <el-button>已选人员工号：{{ tag.staffAccount }}</el-button> -->
              <!-- <el-button>升级人员：{{ tag.staffNameNew }}</el-button> -->
              <!-- <el-button>上级人员工号：{{ tag.staffAccountNew }}</el-button> -->
              <!-- </el-tooltip> -->
              <div class="choicestaffName">
                <div style="margin-left: 20px; margin-top: 10px">
                  推送人员：{{ tag.pushName }}
                </div>
                <div style="margin-left: 20px; margin-top: 10px">
                  升级人员：{{ tag.upgradeName }}
                </div>
                <div class="choicesIcon">
                  <i class="el-icon-delete" @click="handleClose(index)">删除</i>
                  <i class="el-icon-edit" @click="handleUpdata(tag)">编辑</i>
                </div>
              </div>
            </div>
            <el-tag
              v-for="(tag, index) in groupList"
              :key="index"
              closable
              @close="handleGroupClose(index)"
            >
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">单位：{{ tag.orgName }}<br /><br /></div>
                <el-button>{{ tag.orgName }}</el-button>
              </el-tooltip>
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini" type="danger"
          >取 消</el-button
        >
        <el-button type="primary" @click="submit()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选取上级领导 -->
    <el-dialog
      title="人员选择"
      :close-on-click-modal="false"
      :visible.sync="choiceLeaderVisible"
    >
      <div style="margin-bottom: 10px" class="mod-user">
        <el-form
          :inline="true"
          :model="leaderdataForm"
          class="demo-form-inline"
          @keyup.enter.native="onSubmit()"
        >
          <el-form-item label="员工工号">
            <el-input
              v-model="leaderdataForm.account"
              placeholder="请输入员工工号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input
              v-model="leaderdataForm.name"
              placeholder="请输入员工姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="leaderDataList" border style="width: 100%">
          <el-table-column prop="staffAccount" label="员工工号" width="">
          </el-table-column>
          <el-table-column prop="staffName" label="员工姓名" width="">
          </el-table-column>
          <el-table-column
            label="操作"
            width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { List } from "echarts";
export default {
  data() {
    return {
      dialogVisible: false,
      choiceLeaderVisible: false, //选取领导弹框显隐
      inputVal: "",
      groupVal: "",
      staffList: [], // 通讯录一级
      personList: [], // 最后到人的list
      upperStory: [], //选择的人数组
      leaderData: [], //上级领导数据
      staffIds: [], // 发送人数组id
      headList: [], // 头部返回上一层
      loading: false,
      deleteIdList: [], // 批量删除数组
      staffNameOrId: "", // 搜索id,
      sendName: "",
      groupList: [],
      leaderDataList: [], //领导数据
      updateItem: {}, //点击编辑获取的对象
      pushStaffData: "", //点击确定返回的data
      leaderdataForm: {
        account: "", //工号
        name: "", //姓名
      },
    };
  },
  activated() {},
  methods: {
    handleChangeGroup(orgId, orgName) {
      console.log(this.upperStory);
      let obj = new Object();
      let flag = 0;
      this.groupList.map((item) => {
        if (item.orgId === orgId) {
          this.$message({
            message: "您已选择过该单位",
            type: "warning",
          });
          flag = 1;
          return false;
        }
      });
      if (flag === 0) {
        obj.orgId = orgId;
        obj.orgName = orgName;
        this.groupList = [...this.groupList, obj];
      }
    },
    // 回显数据
    fetchAgainData(groupId) {
      if (groupId) {
        let ids = groupId;
        this.$http({
          url: this.$http.adornUrl(`staff/infos`),
          method: "post",
          data: this.$http.adornData({ ids }),
        }).then((res) => {
          if (res.data.code === 0) {
            this.upperStory = res.data.staffList;
            this.groupList = res.data.orgList;
            this.$emit("fetchPersonId", this.upperStory, this.groupList);
          }
        });
      }
    },
    // 字典管理 人员回显
    fetchdescData(groupId) {
      this.$http({
        url: this.$http.adornUrl(`/sysdictdata/info/${groupId}`),
        method: "post",
        data: this.$http.adornData(),
      }).then((res) => {
        if (res.data.code === 0) {
          this.upperStory = res.data.sysDictData.staffAccountAndNameVos;
        }
      });
    },
    fetchAgainGroupData(sysDictDataId) {
      this.$http({
        url: this.$http.adornUrl("/staffsysdictdata/getStaffList"),
        method: "get",
        params: this.$http.adornParams({
          sysDictDataId: sysDictDataId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.upperStory = data.staffList;
          let groupList = data.orgList;
          console.log(groupList);
          let obj = new Object();
          if (groupList) {
            groupList.map((item) => {
              obj = {};
              obj.orgId = item.staffId;
              obj.orgName = item.staffName;
              this.groupList.push(obj);
            });
          }
        }
      });
    },
    // 初始
    init(name, id, groupId) {
        console.log("11111111111111111111111111111111111");
        console.log("name",name);
        console.log("id",id);
      console.log("groupId",groupId);
      this.sendName = name;
      this.dialogVisible = true;
      this.fetchStaffList();
      this.headList = [];
      this.personList = [];
      this.staffNameOrId = "";
      (this.upperStory = []), (this.groupList = []);
      if (id && name === "选择主数据人员") {
        this.fetchAgainData(groupId);
      }
      if (name === "选择主数据人员") {
        this.fetchAgainData(groupId);
      }
      if (name === "人员配置") {
        this.fetchAgainGroupData(groupId);
      }
      if (id && name === "字典管理") {
        this.fetchdescData(groupId);
      }
    },
    // 查看下面分组通讯录
    watchGroup(id, name, superId) {
      let obj = {};
      obj.name = name;
      obj.superId = superId;
      this.headList.push(obj);
      this.fetchTwoSatfflist(id);
    },
    // 人员提示文字
    toplicText(item) {
      let company = item.orgFullName;
      let orgName = item.orgName;
      if (company) {
        if (company.indexOf("中国电信股份有限公司") === 0) {
          company = company.substring(10, company.length);
        }
        let strLength = company.length - orgName.length;
        company = company.substring(0, strLength);
        return company;
      } else {
        return null;
      }
    },
    // 删除人员标签
    handleClose(index) {
      this.upperStory.splice(index, 1);
    },
    // 删除群组标签
    handleGroupClose(index) {
      this.groupList.splice(index, 1);
    },
    // 搜索人员
    searchStaff() {
      this.$http({
        url: this.$http.adornUrl(`/staff/list`),
        method: "get",
        params: this.$http.adornParams({
          keyWord: this.staffNameOrId,
        }),
      }).then(({ data }) => {
        if (data.code === 0) {
          this.personList = data.data;
          this.staffList = [];
          if (data.data.length === 0) {
            this.$message({
              message: "暂无搜索结果！",
              type: "warning",
            });
          }
        }
      });
    },
    // 查询上一层
    searchBeforLive(id, index) {
      this.personList = [];
      if (id) {
        this.fetchTwoSatfflist(id);
      } else {
        this.fetchStaffList();
      }
      this.headList.splice(index);
    },
    // 选择人
    handleCheckedCitiesChange(
      staffId,
      staffName,
      orgName,
      staffAccount,
      staffPosition,
      orgFullName
    ) {
      // console.log(this.upperStory)
      let obj = {};
      let flag = 0;
      console.log(this.upperStory);
      this.upperStory.map((item) => {
        if (item.staffId === staffId) {
          this.$message({
            message: "您已选择过该成员",
            type: "warning",
          });
          flag = 1;
          return false;
        }
      });
      if (flag === 0) {
        // let temps = await this.getLeader(staffAccount);
        // console.log("tempstempstemps", temps);
        // obj.staffNameNew = temps.staffNameNew;
        // obj.staffAccountNew = temps.staffAccountNew;

        this.$http({
          url: this.$http.adornUrl(`/staff/getLeader`),
          method: "get",
          params: this.$http.adornParams({
            acc: staffAccount,
            type: 0,
          }),
        }).then(({ data }) => {
          if (data.code === 0) {
            console.log("data.data", data.data);
            this.leaderData.push(data.data);
            console.log("---------------", this.leaderData);
            this.leaderData.forEach((element) => {
              //   console.log("------------", element.staffName);
              obj.upgradeName = element.staffName;
              obj.upgradeAcc = element.staffAccount;
            });
          }
        });

        obj.staffId = staffId;
        obj.pushName = staffName;
        // obj.orgName = orgName;
        obj.pushAcc = staffAccount;
        // obj.staffPosition = staffPosition;
        // obj.orgFullName = orgFullName;
        // setTimeout(this.upperStory.push(obj),1000)
        setTimeout(() => {
          this.upperStory.push(obj);
        }, 1000);
        console.log("----------------", this.upperStory);
        //
      }
    },
    //获取当前人的上级
    getLeader(staffAccount) {
      this.$http({
        url: this.$http.adornUrl(`/staff/getLeader`),
        method: "get",
        params: this.$http.adornParams({
          acc: staffAccount,
          type: 0,
        }),
      }).then(({ data }) => {
        if (data.code === 0) {
          console.log("data.data", data.data);
          this.leaderData.push(data.data);
          //   console.log("---------------", this.leaderData);
          //   console.log("----------------", this.upperStory);//
          this.leaderData.forEach((element) => {
            //   console.log("------------", element.staffName);
            let obj = {};
            obj.staffNameNew = element.staffName;
            obj.staffAccountNew = element.staffAccount;
            return obj;
          });
        }
      });
    },
    //删除选项
    handleClose(index) {
      console.log("index", index);
      this.upperStory.splice(index, 1);
      console.log("this.upperStorythis.upperStory==", this.upperStory);
    },
    //编辑-选择上级领导
    handleUpdata(item) {
      console.log("工号", item.pushAcc);
      console.log("工号", item);
      this.updateItem = item;
      this.choiceLeaderVisible = true;
      this.getChoiceLeader(item.pushAcc);
    },
    getChoiceLeader(pushAcc) {
      this.$http({
        url: this.$http.adornUrl(`/staff/getLeader`),
        method: "get",
        params: this.$http.adornParams({
          acc: pushAcc,
          type: 1,
        }),
      }).then(({ data }) => {
        if (data.code === 0) {
          console.log("data.data", data.data);

          this.leaderDataList = data.data;
        } else {
          this.leaderDataList = [];
          this.$message.error(data.msg);
        }
      });
    },
    //选择领导
    handleClick(item) {
      console.log("item----------", item);
      console.log(
        "updateItemupdateItemupdateItemupdateItemupdateItem",
        this.updateItem
      );
      console.log("----------------", this.upperStory);
      this.upperStory.forEach((element) => {
        // element.upgradeAcc = item.staffAccount
        // element.upgradeName = item.staffName
        if (element.pushAcc === this.updateItem.pushAcc) {
          console.log("itemitemitem", item.staffName);
          console.log("elementelementelement", element.upgradeName);
          element.upgradeAcc = item.staffAccount;
          element.upgradeName = item.staffName;
          this.choiceLeaderVisible = false;
        }
      });
    },
    //点击查询
    onSubmit() {
      this.getChoiceLeader();
    },
    //点击重置
    onReset() {
      this.leaderdataForm.account = "";
      this.leaderdataForm.name = "";
      this.getChoiceLeader();
    },
    // 点击刷新
    RefreshList() {
      this.fetchStaffList();
      this.personList = [];
      this.headList = [];
      this.staffNameOrId = "";
    },
    // 点击获取一级通讯录
    fetchStaffList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(`organization/selectFirstList`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data.code === 0) {
          this.staffList = data.list;
          this.loading = false;
        }
      });
    },
    // 点击获取二级通讯录
    fetchTwoSatfflist(orgId) {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(`/organization/selectSonList`),
        method: "get",
        params: this.$http.adornParams({
          orgId,
        }),
      }).then(({ data }) => {
        console.log(data);
        if (data.code === 0) {
          this.staffList = data.organization;
          this.personList = data.staff;
          this.loading = false;
        }
      });
    },
    // 确定
    submit() {
      this.dialogVisible = false;
      this.getSavePushStaff();
      //   if (this.sendName === "选择主数据人员") {
      //     console.log(this.upperStory, this.groupList);
      //     this.$emit("fetchPersonIdTow", this.upperStory, this.groupList,this.pushStaffData);
      //   }
      //   if (this.sendName === "人员配置") {
      //     // this.$emit('fetchPersonId', this.upperStory, this.groupList)
      //     this.$emit("fetchGroupId", this.upperStory, this.groupList);
      //   }
      //   if (this.sendName === "字典管理") {
      //     this.$emit("fetchPersonId", this.upperStory, this.groupList);
      //   }
    },
    //点击确定
    getSavePushStaff() {
      console.log("-------------", this.upperStory);
      console.log("-------------", typeof this.upperStory);
      let list = [];
      list = this.upperStory;

      // let list = []
      // list.push(this.upperStory)
      console.log("------------", list);
      // console.log("------------",typeof list);
      // let list = JSON.stringify(this.upperStory)
      // let list = JSON.parse(this.upperStory)
      // return
      this.$http({
        url: this.$http.adornUrl("/staffConfig/savePushStaff"),
        method: "post",
        data: this.$http.adornData({ list }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("------------", data.data);
          this.pushStaffData = data.data;
          if (this.sendName === "选择主数据人员") {
            console.log(this.upperStory, this.groupList);
            this.$emit(
              "fetchPersonIdTow",
              this.upperStory,
              this.groupList,
              this.pushStaffData
            );
          }
          if (this.sendName === "人员配置") {
            // this.$emit('fetchPersonId', this.upperStory, this.groupList)
            this.$emit("fetchGroupId", this.upperStory, this.groupList);
          }
          if (this.sendName === "字典管理") {
            this.$emit("fetchPersonId", this.upperStory, this.groupList);
          }
          //   this.$message({
          //     message: "操作成功!",
          //     type: "success"
          //   });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-button {
  color: #fff !important;
}
.personList {
  display: flex;
  justify-content: space-between;
}
.el-dialog__body {
  padding: 0 20px;
}
.person_content {
  display: flex;
}
.el-tag {
  height: 30px;
}
.el-tag button {
  background: transparent;
  border: 0;
}
.group {
  width: 60%;
}
.group div {
  width: 100%;
  box-sizing: border-box;
}
.group div h3 {
  width: 100%;
  text-align: center;
}
.staff_con {
  width: 100% !important;
  height: 486px;
  overflow-y: auto;
}
.group_con {
  width: 50%;
  height: 600px;
  padding: 10px;
  border: 1px solid #dedede;
}
.group_con ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.group_con li {
  cursor: pointer;
}
/* .group_con p:hover{
  background: #3E8EF7;
  color: #fff;
} */
.personnel {
  margin: 0 20px;
  width: 40%;
}
.personnel h3 {
  text-align: center;
}
.input {
  width: 83% !important;
}
.el-checkbox-group {
  padding-left: 40px !important;
}
.title {
  line-height: 40px;
  font-weight: bold;
  font-size: 20px;
  min-height: 0;
}
.searchInput {
  margin: 10px 0;
}
.title > span {
  cursor: pointer;
}
.title > span:last-child span {
  display: none;
}
.person_box {
  border: 1px solid #dedede;
  display: inline-block;
  width: 100%;
  height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}
.person_box > span {
  margin: 2px 6px;
}
.group_li {
  padding: 0 !important;
  line-height: 30px;
  height: 546px;
  overflow-y: scroll;
}
.group_li li {
  padding-left: 40px !important;
}
.group_li li:hover {
  background: #3e8ef7;
  color: #fff;
}
.person_list li {
  line-height: 32px;
  padding-left: 40px;
}
.person_list li:hover {
  background: #3e8ef7;
  color: #fff;
}
.list_con {
  width: 100%;
}
.choicestaffName {
  height: 80px;
  border: 1px solid gray;
  margin-top: 0.3125rem;
  /* position: relative; */
}
.choicesIcon {
  /* position: absolute;
  right: 1.25rem;
  top: -2.375rem; */
  float: right;
  margin-right: 20px;
  margin-top: -20px;
  cursor: pointer;
}
</style>